<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="dist/echarts.min.js"></script>

<body>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            overflow: hidden;
        }

        #main {
            width: 80%;
            height: 90%;
            background: rgba(0, 0, 0, 0);
        }
    </style>

    
    <div id="main"></div>

    <script type="text/javascript">
        
        var myChart = echarts.init(document.getElementById('main'));
        var option;

        myChart.showLoading({

            text: 'Wait Loading Chart',
            color: '#ff33cc',
            textColor: '#fff',
            maskColor: 'rgba(0,0,0,0)',
            zlevel: 5,

        });

        var items = new Array();
        var values = new Array();
        var floatI100 = false;

        function SetValue() {

            ue.obj.setchartitem().then(function (ReturnValue) {
                items = ReturnValue;
            });

            ue.obj.setchartvalue().then(function (ReturnValue) {
                values = ReturnValue;
            });

            ue.obj.setcharfloati100().then(function (ReturnValue) {
                floatI100 = ReturnValue;
            });

            if (floatI100) {

                for (let i = 0; i < values.length; i++) {
                    var ix = values[i] / 100;
                    values[i] = ix;
                }
            }

        }

        function SetOption() {

            option = {

                color: ['#2f89cf'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            
                        type: 'shadow'        
                    }
                },
                //修改图表大小
                grid: {
                    left: '5%',
                    top: '10%',
                    right: '5%',
                    bottom: '5%',
                    containLabel: true
                },

                legend: {
                    //data: [valueType, '库存']
                },
                xAxis: {
                    type: 'category',
                    data: items,
                    axisTick: {
                        alignWithLabel: true
                    },
                    //修改横轴刻度文字颜色
                    axisLabel: {
                        color: "rgba(255,255,255,.5)",
                        fontsize: 12,
                    }, axisLine: {
                        show: true
                    }

                },
                yAxis: [{
                    axisLabel: {
                        color: "rgba(255,255,255,.6)",
                        fontsize: 12,
                    },
                    //修改y轴线条样式

                    axisLine: {
                        LineStyle: {
                            color: "rgba(255,255,255,.1)",
                            width: 2
                        }
                    },

                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                        }
                    }
                }
                ],

                series: [{

                    type: 'bar',
                    //修改bar的宽度
                    barWidth: '50%',
                    data: values,
                    //直角变圆角
                    itemStyle: {
                        barBorderRadius: 2
                    }
                }]
            };
        }

        setInterval(function () {
            SetValue();
            SetOption();

            myChart.setOption(option);
            myChart.hideLoading();
        }, 1000);

    </script>

</body>

</head>